<template>
	<view>
		<view class="" style="width: 100%;height: 500rpx;">
			<map :markers="markers" scale='18' :enable-satellite='checkedWeixin' enable-building='true'
				style="width: 100%; height:500rpx;" :latitude="latitude" :longitude="longitude" id="map" ref='map'>
			</map>
		</view>
		<view class="store_box">
			<view class="store" v-for="(item, index) in BusinessInfoList" :key="index" @tap.stop="changeBusiness(item)">
				<view class="left">
					<view class="title">
						<view style="font-weight: bold;" >{{item.businessName}}</view> 
						<view class="">
							<view class="businessStatus"
								:style="{'color':templateConfig.page.themeColor,'border':`2rpx solid ${ templateConfig.page.themeColor}`}"
								v-if="item.businessTimeStatus==0">营业中</view>
							<view class="businessStatus" v-else-if="item.businessTimeStatus==1" >
								休息中
							</view>
						</view>
						
					</view>
					<view class="address time">{{item.businessAddress.address}}</view>
					<view class="time" style="">
						营业时间:
						<view class="" style="margin-right: 10rpx;" v-for="result in item.businessHours">
							{{result.businessStartTime}}~{{result.businessEndTime}}
						</view>
						
					</view>
				</view>
				<view class="right">
					<view class="right-box" style="margin-right: 12rpx;" @click.stop="getPhone(item.businessMobile)">
						<u-icon name="phone-fill" :color="templateConfig.page.themeColor" size="20"></u-icon>
					</view>
					<view class="right-box" @click.stop="openMap(item.businessAddress.longitude,item.businessAddress.latitude)">
						<u-icon name="map-fill" :color="templateConfig.page.themeColor" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- <view class="businessInfoList" v-for="item in BusinessInfoList" @tap="changeBusiness(item)">
			<view class="image">
				<image :src="item.businessLogo" mode="widthFix"></image>
			</view>
			<view class="name">
				<view class="name-one">{{ item.businessName }}</view>
				<view class="name-two">{{ item.businessAddress.address }}</view>
			</view>
			<view class="">
				<radio :checked="item.checked" />
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getBusinessInfoList,
		getRecommen,
		getHomeDataInfo,
		getCategory
	} from '../../static/utils/api.js';
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				BusinessInfoList: [],
				nowBusinessInfo: {},
				checkedWeixin: false,
				latitude: uni.getStorageSync('nowBusinessInfo').businessAddress.latitude,
				longitude: uni.getStorageSync('nowBusinessInfo').businessAddress.longitude,
				markers: [{
					id: 0,
					title: uni.getStorageSync('nowBusinessInfo').businessName,
					width: 40,
					height: 40,
					iconPath: uni.getStorageSync('nowBusinessInfo').businessLogo,
					latitude: uni.getStorageSync('nowBusinessInfo').businessAddress.latitude,
					longitude: uni.getStorageSync('nowBusinessInfo').businessAddress.longitude,
					callout: {
						content: uni.getStorageSync('nowBusinessInfo').businessName,
						color: '#ffffff',
						bgColor: uni.getStorageSync('templateConfig').page.themeColor,
						padding: 5,
						display: 'ALWAYS',
						borderRadius: 5
					}
				}]
			};
		},
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo')
			this.getBusinessInfoList();

		},
		methods: {
			getBusinessInfoList() {
				getBusinessInfoList().then(res => {
					if (res.code == 200) {
						res.body.forEach((item)=>{
							this.BusinessInfoList.push(item.jsonViewData)
						})
						// this.BusinessInfoList = res.body;
						// this.BusinessInfoList.forEach(item => {
						// 	if (item.businessId == this.nowBusinessInfo
						// 		.businessId) {
						// 		item.checked = true
						// 	}
						// });


					}
				});
			},
			changeBusiness(item) {
				uni.setStorage({
					key: 'nowBusinessInfo',
					data: item
				});
				uni.navigateBack({
					delta: 1
				})
			},
			getPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				}).catch((e) => {
    // console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
  })
			},
			openMap(lon, lat) {
						uni.openLocation({
							latitude: parseFloat(lat),
							longitude: parseFloat(lon),
							scale: 18
						})
				
			},
		}
	};
</script>

<style scoped lang="scss">
	.businessInfoList {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f5f5f5;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		.name {
			width: 500rpx;

			.name-one {
				font-size: 28rpx;
				font-weight: 700;
			}

			.name-two {
				width: 500rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 26rpx;
				color: #999;
				padding-top: 20rpx;

			}
		}
	}
	
	.store_box {
		width: 100%;
		padding-top: 20rpx;
	
		.store {
			width: 94%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			background-color: #fff;
			// border-bottom: 1px dashed #efefef;
			box-shadow: 0px 0px 16rpx 0px rgba(207, 207, 207, 0.5);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
	
			.left {
				// width: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.title {
					
					display: flex;
					align-items: center;
					.businessStatus{
						border: 2rpx solid #7abcf9;
						color: #6da7de;
						font-size: 20rpx;
						text-align: center;
						padding: 2rpx;
						margin-left: 12rpx;
					}
				}
	
				.address {
					margin: 6rpx 0;
				}
	
				.time {
					font-size: 24rpx;
					color: #aaa;
					display: flex;align-items: center;
				}
	
				image {
					width: 100rpx;
					height: 100rpx;
					border: 1px solid #f5f5f5;
					border-radius: 100%;
				}
			}
	
			.right {
				height: 100%;
				display: flex;
				align-items: center;
	
				.right-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
					background-color: #e3f0fc;
				}
			}
		}
	}
</style>